<template>
  <el-container>
    <el-header>
      <!--头部-->
      <Header></Header>
    </el-header>
    <br>
    <el-main>
      <!--搜索-->
      <Search></Search>
      <el-row>
          <el-col :span="1">&nbsp;</el-col>
          <el-col :span="22">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item>全部</el-breadcrumb-item>
              <el-breadcrumb-item>{{type}}</el-breadcrumb-item>
            </el-breadcrumb>
            <br>
            <table width="100%" style="border: 2px solid whitesmoke;padding: 20px;font-size: 14px">
              <tr >
                <td><span>品类:</span></td>
                <template v-for="x in brand">
                  <td><el-link type="primary" @click="queryInfo(x.brandId)">{{x.brandName}}</el-link></td>
                </template>
              </tr>
              <tr >
                <td><span>价格:</span></td>
                <td><el-link type="primary" @click="queryPrice(1,199)">0-199</el-link></td>
                <td><el-link type="primary" @click="queryPrice(200,299)">200-299</el-link></td>
                <td><el-link type="primary" @click="queryPrice(300,399)">300-399</el-link></td>
                <td><el-link type="primary" @click="queryPrice(400,599)">400-499</el-link></td>
                <td><el-link type="primary" @click="queryPrice(500,599)">500-599</el-link></td>
                <td><el-link type="primary" @click="queryPrice(600,699)">600-699</el-link></td>
                <td><el-link type="primary" @click="queryPrice(700,799)">700-999</el-link></td>
                <td><el-link type="primary" @click="queryPrice(1000,1000000)">1000以上</el-link></td>
              </tr>
            </table>
            <br>
            <div>
              <el-button type="danger" size="small"  @click="queryOrderBy">销量:从高到低</el-button>
              <el-button type="primary" size="small" @click="queryOrderBy">销量:从低到高</el-button>
              <el-button type="primary" size="small" @click="queryOrderBy">价格:从高到低</el-button>
              <el-button type="primary" size="small" @click="queryOrderBy">价格:从低到高</el-button>

              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="form.page"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="form.row"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </div>

            <div v-for="x in imgGirl"  >
            <div style="float:left;width: 260px;height: 300px">
              <ul style="list-style-type: none">
                <li>
                  <a @click="toProcuctDetail(x)">
                    <img :src="require('../../assets/images/'+x.src)" width="220px" height="220px">
                  </a>

                </li>
                <li>
                  <ul style="list-style-type: none;font-size: 12px">
                    <li><el-tag type="danger">特卖价:{{x.price}}元</el-tag></li>
                    <li>
                      <el-link style="font-size: 12px">{{x.title}}</el-link>
                    </li>

                  </ul>
                </li>
              </ul>


            </div>
            </div>



          </el-col>
          <el-col :span="1">&nbsp;</el-col>
      </el-row>



    </el-main>
    <Footer></Footer>
  </el-container>
</template>

<script>
  import Header from "./myComponents/Header";
  import Search from "./myComponents/Search";
  import Footer from "./myComponents/Footer";
    export default {
        name: "ProductClass",
        components:{
          Header,
          Search,
          Footer
      },
        data(){
           return{
               form:{ //请求参数
                  page:1,
                  row : 5,
                  brandId:0,
                  startPrice:0,
                  endPrice:0,
                  word:"",//关键字搜索
                  proType:0,//商品类型
               },
               total:0,//总条数
               brand:[],//品牌
               imgGirl:[],//商品数组
           }
        },
        computed:{//计算属性
            type(){
              if(this.form.proType == 1){
                return "男装";
              }
              if(this.form.proType == 2){
                return "女装";
              }
              if(this.form.proType  == 3){
                return "鞋包";
              }


          }
        },
        methods:{
          toProcuctDetail(x){//查看商品详情
            sessionStorage.setItem("productDetail",JSON.stringify(x));
            this.$router.push("/productDetail");
          },
          queryPrice(a,b){//价格查询
            this.form.startPrice = a;
            this.form.endPrice = b;
            this.queryProduct();
          },
          queryInfo(num){//品牌查询
            this.form.brandId = num;
            this.queryProduct();
          },
          queryBrand(){//品牌查询
            const self = this;
            this.$http.get("/brand/query",{params:{"proType":this.form.proType}})
              .then(function (rs) {

                if(rs.data.code == 200){
                  self.brand = rs.data.data;

                }else{
                  //清空
                  self.brand = [];
                }
              })
          },
          queryOrderBy(){

          },
          queryProduct(){//查询不同类型的商品
            const self = this;
            console.log(this.form);
            this.$http.get("/goods-info/queryCache",{params:this.form})
            .then(function (rs) {

                 if(rs.data.code == 200){
                    self.imgGirl = rs.data.data.list;
                    self.total = rs.data.data.total;
                 }else{
                   //清空
                   self.imgGirl = [];
                 }
            })
          },
          handleSizeChange(row){//分页下来菜单触发的事件
             console.log("row="+row);
             this.form.row = row;
             const status = localStorage.getItem("status");

             if(status==1){
               //全文搜素
               this.searchInfo();
             }else{
               //发送ajax
               this.queryProduct();
             }


          },
          handleCurrentChange(page){//页码点击触发的事件
             console.log("page="+page);
             this.form.page = page;
            const status = localStorage.getItem("status");
            console.log("status="+status);
            if(status==1){
              //全文搜素
              this.searchInfo();
            }else{
              //发送ajax
              this.queryProduct();
            }

          },
          searchInfo(){//全文搜素

            const self = this;
            this.$http.get("/goods-info/queryFull",{params:this.form})
              .then(function (rs) {
                if(rs.data.code == 200){
                  self.imgGirl = rs.data.data.list;
                  self.total = rs.data.data.total;
                }else{
                  //清空
                  self.imgGirl = [];
                }
              })
          },



      },
      mounted() {
        //获取商品类型
        this.form.proType = localStorage.getItem("proType");
        //获取关键字
        this.form.word = localStorage.getItem("word");
          //获取全文搜索的查询结果
         const data = sessionStorage.getItem("data");
         console.log("data="+data);
         //查询商品分类的品牌
        this.queryBrand();
         if(data==null){
           this.queryProduct();

         }else{
            //把data转换成json对象
            const json = JSON.parse(data);
            console.log(json);
            this.total = json.total;
            this.imgGirl = json.list;
         }


      }

    }
</script>

<style scoped>

</style>
